<template>
  <div>
    <p>侦听器</p>
    <p>{{ obj.name }}-{{ obj.age }}</p>
    <button @click="change">点击</button>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'

const obj = ref({ name: 'zs', age: 18 })
watch(
  obj,
  newValue => {
    // 收到的是代理对象
    console.log(newValue)
  },
  {
    deep: true
  }
)
const change = () => {
  obj.value.age = 20
}
</script>
